<template>
  <div class="continue-panel">
    <back-button @click="backAction" />
    <div class="continue-panel-content">
      <cg-scrollbar wrap-height="max" inner-scroll>
        <div class="record-content">
          <continue-card
            v-for="(item, index) in list"
            :data="item"
            :key="index"
            @enter="routeTo(item)"
            @delete="deleteItem(item)"
          />
        </div>
      </cg-scrollbar>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useStore } from 'vuex'
import Api from '../../components/tools/api'
import Message from '../../components/message/index'
import { useRouter } from 'vue-router'
import { DispatchResult } from '../../tools'

import backButton from '@/common/components/back-button.vue'
import continueCard from './components/continueCard.vue'

defineOptions({
  name: 'continue-panel'
})

const list = ref([])
const router = useRouter()
const store = useStore()
const backAction = () => {
  router.back()
}

const routeTo = (item: any) => {
  router.replace(`/game/${item.id}/base-scene`)
}

const deleteItem = (item: any) => {
  router.replace(`/game/${item.id}/base-scene`)
}

const findAllData = async () => {
  try {
    let result = await Api.send(`/game/findAllData`, {
      uid: store.state.uid
    })
    DispatchResult(result, {
      onSuccess: (data: any) => {
        console.log('findAllData', list)
        list.value = data
      },
      onError: (_data: any, message: any) => {
        Message({ message, type: 'error' })
      }
    })
  } catch (error) {
    console.log(error)
  }
}

onMounted(() => {
  findAllData()
})
</script>

<style lang="scss">
.continue-panel {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem 0;
  box-sizing: border-box;

  .continue-panel-content {
    height: 100%;
    width: 100%;
    max-width: 500px;
  }

  .scrollbar {
    .scrollbar__view {
    }
  }

  .record-content {
    overflow: hidden;
  }
}
</style>
